<template>
  <div class="login_container">
    <div class="header">
      <img src="@/assets/logo.png" alt="Logo" class="logo">
    </div>
    <div class="login_box">
      <!-- 登录表单区域 -->
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane class="el-tabs_pwdLogin" name="first" label="账号密码登录">
          <!-- 账号密码登录表单 -->
          <el-form class="pwdLogin_form" ref="pwdLoginFormRef" :model="pwdLoginForm" :rules="pwdLoginFormRules">
            <!-- 用户名 -->
            <el-form-item class="username_item" prop="username">
              <el-input type="inputValue" placeholder="请输入手机号/证件号码" v-model="pwdLoginForm.username" clearable prefix-icon="el-icon-user" bolder-radius="20"></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item class="password_item" prop="password">
              <el-input  placeholder="请输入密码" v-model="pwdLoginForm.password" clearable show-password prefix-icon="el-icon-lock" bolder-radius="20"></el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="login_btns">
              <el-button class="login_btn" type="primary" @click="pwdLogin" :loading="loading">登录</el-button>
            </el-form-item>
            <el-form-item class="register_btns">
              <el-button class="register_btn" type="text" @click="toRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane class="el-tabs_phoneLogin" name="second" label="手机验证码登录">
          <!-- 手机验证登录表单 -->
          <el-form class="phoneLogin_form" ref="phoneLoginFormRef" :model="phoneLoginForm" :rules="phoneLoginFormRules">
            <!-- 手机号 -->
            <el-form-item prop="phone">
              <el-input placeholder="请输入手机号" v-model="phoneLoginForm.phone" clearable prefix-icon="el-icon-phone"></el-input>
            </el-form-item>
            <!-- 手机验证码 -->
            <el-form-item prop="phoneCode">
              <el-input placeholder="请输入验证码" v-model="phoneLoginForm.phoneCode" clearable prefix-icon="el-icon-key">
                <template #append>
                  <el-button @click="getPhoneValidateCode" :disabled="disabled">{{ buttonText }}</el-button>
                </template>
              </el-input>
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item class="login_btns">
              <el-button class= "login_btn" type="primary" @click="phoneLogin">登录</el-button>
            </el-form-item>
            <el-form-item class="register_btns">
              <el-button class="register_btn" type="text" @click="toRegister">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="login_footer">
      登录即表示您已阅读并同意
      <a href="#">服务条款</a>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
  export default {
    data() {
      return {
        activeTab: 'first', // 默认选中账号密码登录
        loading: false,
        pwdLoginForm: {
          username: '',
          password: ''
        },
        pwdLoginFormRules: {
          username: [
            {required: true, message: '请输入手机号/证件号码', trigger: 'blur'},
            {min: 11, max: 18, message: '长度在 11 到 18 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 20, message: '密码长度不能少于 6 位不能大于20位', trigger: 'blur'}
          ]
        },
        phoneLoginForm: {
          phone: '',
          phoneCode: ''
        },
        phoneLoginFormRules: {
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}
          ],
          phoneCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {min: 6, max: 6, message: '验证码长度必须为 6 位', trigger: 'blur'}
          ]
        },
        buttonText: '获取验证码',
        disabled: false,
        count: 60, // 倒计时时间
      };
    },
      methods: {
        toRegister() {
          this.$router.push('/UserRegister');
        },
        pwdLogin() {
          let responseBody = {
            username: this.pwdLoginForm.username,
            password: this.pwdLoginForm.password
          }
          axios.post('/login/traveller/byPassword', responseBody)
            .then(response => {
               localStorage.setItem('token', response.data);
               this.$router.push('/MainView');
            })
          .catch(error => {
              console.log(error);
              this.$message.error('登录失败，请检查用户名或密码');
          });
      },
        getPhoneValidateCode(){
          if (this.phoneLoginForm.phone.length !== 11) {
            this.$message.error('手机号码格式不正确，请重新输入');
            return;
          }
          axios.post('/sendVerificationCode', {phoneNumber: this.phoneLoginForm.phone})
            .then(response => {
              if (response.data === '验证码已发送') {
                this.$message.success('验证码已发送，请注意查收');
                this.disabled = true;
                this.countDown();
              } else {
                this.$message.error('验证码发送失败，请稍后再试');
              }
            })
            .catch(error => {
              console.error('验证码发送失败', error);
            });
        },
        phoneLogin(){
          let responseBody = {
            phone: this.phoneLoginForm.phone,
            phoneCode: this.phoneLoginForm.phoneCode
          }
          axios.post('/login/traveller/byPhone/VerificationCode', responseBody)
            .then(response => {
               localStorage.setItem('token', response.data);
               this.$router.push('/MainView');
             })
            .catch(error => {
               console.log(error);
               this.$message.error('登录失败，请检查手机号或验证码');
             });
        }
    }
  }
</script>

<style scoped>
.header {
  height: 80px;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.logo {
  width: 100px;
  height: 70px;
  position: absolute;
  top:3px;
  left:50px;
}
.login_container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../assets/background.png);
  position: fixed;
  background-size: 100% 100%;
}

.login_box {
  width: 395px;
  height: 435px;
  background-color: rgba(225, 225, 225, 0);
  border: 1px solid rgba(225, 225, 225, 0);
  box-shadow: 2px 3px 3px #aaaaaa;
  border-radius: 5px;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.el-tabs {
  width: 100%;
  height: 100%;
}
.el-tabs_pwdLogin {
  label-width: 300px;
  label-position: left;
}
.username_item{
  width: 100%;
  height: 100%;
}
.password_item{
  width: 100%;
  height: 100%;
  margin-top: 30px;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 20px;
  margin-top: 30px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login_footer {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  border: 1px solid #ffffff;
  width: 395px;
  height: 30px;
  text-align: center;
}
.pwdLogin_form {
  padding: 20px;
  position: fixed;
  top: 80px;
  width:320px;
}
.phoneLogin_form {
  padding: 20px;
  position: fixed;
  top: 80px;
  width:320px;
}
.el-tabs__content {
  padding: 20px;
}

.el-form-item__error {
  margin-top: 4px;
  font-size: 12px;
  color: #f56c6c;
}
.login_btn {
  margin-top: 20px;
  background-color: #409eff;
  width: 100%;
}
.register_btn {
  margin-top: 20px;
  position: fixed;
  left:40px;
}
.el-input {
  width: 100%;
}

.el-button {
  margin-right: 10px;
}
</style>
